<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>#div2{width:200px;height:200px;background-color: red; color:#fff;position: absolute;cursor:pointer;}
        #div1{width:600px;height:600px;background-color: #ccc;position:relative;}
    </style>
<script>
//<!--拖拽涉及几个操作动作  鼠标按下  鼠标抬起  鼠标移动-->
/*鼠标拖拽原理*/

window.onload=function(){
   var oDiv=document.getElementById('div2');
   var oDiv1=document.getElementById('div1');
   var disX=0;
   var disY=0;
   oDiv.onmousedown=function(ev){//鼠标按下
         var oEvent=ev||event;
         disX=oEvent.clientX-oDiv.offsetLeft;//距离横坐标
         disY=oEvent.clientY-oDiv.offsetTop;//距离纵坐标
       document.onmouseover=function(ev){//鼠标拖快了，会脱离方块，所以需要加在document                      鼠标移动，鼠标hover
           var oEvent=ev||event;
           var l=oEvent.clientX-disX;
           var t=oEvent.clientY-disY;
//           阻止用户将框从四边拖出去方法：
           if(l<50){//接近左端50px，物体就自动吸附在左面                     当用户把框拖出左边
               l=0;//阻止的方法，让l=0，
           }
           else if(l>oDiv1.offsetWidth-oDiv.offsetWidth){//阻止用户，不能从右边将框拖出去//页面可视区宽度-div的宽度
               l=oDiv1.offsetWidth-oDiv.offsetWidth;
           }
           //oDiv1.offsetWidth指定区域的宽
//    document.documentElement.clientWidth      页面可视宽度
           if(t<50){//接近上端50px，物体就自动吸附在上面
               t=0;
           }
           else if(t>oDiv1.offsetHeight-oDiv.offsetHeight){
               t=oDiv1.offsetHeight-oDiv.offsetHeight;
           }

           oDiv.style.left=l+'px';
           oDiv.style.top=t+'px';
       };
       document.onmouseup=function(){//拖
           document.onmouseover=null;
           document.onmouseup=null;
       };
       return false;//解决FF空div出现的bug，通过阻止默认事件
   };
};

</script>
</head>
<body>
<div id="div1">
    <div id="div2">
    </div>
</div>

</body>
</html>